﻿@charset "utf-8";
@import "common/global";
@import "header";
@import "footer";
@import "circle";

.main {
    .index-item {
        .index-item-title{
            padding: rem(40px) rem(30px);
            background: #fff;
        }

        .index-box{
            padding:rem(15px) rem(30px) rem(50px) rem(30px);
            margin-bottom: rem(15px);
            background: #fff;
           
        }

        .index-box.radar-box{
            padding-bottom: 1rem;
        }

        .pre-sign {
            background-color: $diyColor;
            display: inline-block;
            width: 0.09rem;
            height: 0.3rem;
            margin-top: 0.02rem;
            margin-right: 0.1rem;
        }

        .protect-box {
            text-align: center;

            .mid {
                width: 3.5rem;
                height: 3.3rem;
            }

            [class^="protect-link"] {
                width: 2rem;
                img {
                    width: .6rem;
                    height: .6rem;
                }
                word-break: break-all;
            }

            .protect-link2 {
                right: -.3rem;
                top: 2rem;
            }

            .protect-link5 {
                left: -.3rem;
                top: 2rem;
            }

            .protect-link3 {
                right: 10%;
                bottom: -.8rem;
            }

            .protect-link4 {
                left: 10%;
                bottom: -1rem;
            }
        }

        .assets-box {
            background-color: #fff;

            .item {
                text-align: left;
                margin: 0 auto;
                position: relative;

                .img-box {
                    img {
                        width: 49%;
                        height: 2rem;
                        text-align: left;
                    }
                }

                .asset-data-box {
                    top: .6rem;
                    height: .3rem;
                }

                .asset-des {
                    color: #999;
                }

                .asset-des, .asset-data {
                    text-align: center;
                    margin-top: .1rem;
                    display: inline-block;
                    width: 49%;
                }
            }
        }

        .connect-box {
            .circle-box{
                height: 5.5rem;
            }
            .circle-com{
                position: absolute;
                left: 0;
                right: 0;
                margin:auto;
                border-radius: 50%;
            }
            .circle1{
                width: 5rem;
                height: 5rem;
                background-color: #f6f6f6;
                z-index: 1;
            }
            .circle2{
                width: 3rem;
                height: 3rem;
                background-color: #eee;
                z-index: 2;
                top:1rem;
            }

            .circle-img{
                width: 1.5rem;
                height: 1.5rem;
                z-index: 3;
                top:1.75rem;
            }

            [class^='connect-link']{
                position: absolute;
                z-index: 4;
                width: 2rem;
            }
            .connect-link1{
                top:0;
                left: -1.8rem;
            }
            .connect-link2{
                top:3rem;
                left: -1rem;
            }
            .connect-link3{
                top:2.5rem;
                left: 2.5rem;
            }
            .connect-link4{
                top:-.5rem;
                left: 2.5rem;
            }

            .item {
                background-color: #f4f4f4;
                padding: rem(20px);
                margin-top: rem(20px);

                .face-box {
                    position: relative;

                    img {
                        width: .6rem;
                        height: .6rem;
                        border-radius: .6rem;
                        position: absolute;
                    }

                    .face-left {
                        right: .5rem;
                        z-index: 1;
                    }

                    .face-right {
                        z-index: 0;
                        right: 0;
                    }
                }

                .des1 {
                    color: #585858;
                }

                .des2 {
                    color: #9c9c9c;
                }
            }
        }


        .mydata-box {
            .item {
                .icon-img {
                    width: .4rem;
                    height: .4rem;
                }

                .data-des {
                    margin: 0 auto;
                    text-align: center;

                    .des-box {
                        background-color: #f6f6f6;
                        width: 48%;
                        height: 3rem;
                        text-align: center;
                        position: relative;
                        display: inline-block;

                        .circle-box {
                            margin: .5rem auto .1rem auto;
                            display: inline-block;
                            z-index: 0;
                        }

                        .circle-num {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            top: 1.1rem;
                            z-index: 1;
                        }

                        .circle-des {
                            width: 100%;
                            height: 1rem;
                            background-color: #f6f6f6;
                            color: #9c9c9c;
                            position: absolute;
                            left: 0;
                            top: 1.9rem;
                            z-index: 1;
                        }
                    }
                }
            }
        }
    }
}